<template>
	<view class="composite-progress-box">
		<view class="title common">
			总需要合成值
			<text class="green">{{ conflateVal }}</text>
			<view class="smaller">(相关材料可合成总值请查看下方详细进度)</view>
		</view>
		<view class="total-progress common">
			<view class="left">总进度</view>
			<view class="right">{{ completeVal }}<text>/{{ conflateVal }}</text></view>
		</view>
		<view class="progress-box common">
			<block v-for="(el,index) in 18" :key="index">
				<view class="single-box" :key="index" :class="index + 1 <= completeNum? 'satisfaction' : ''"></view>
			</block>
		</view>
		<!-- 普通材料 -->
		<view class="ordinary-materials common">
			<view class="materials">
				普通材料
				<text class="strong green">{{ completeVal }}</text>
				<text class="strong">/{{ conflateVal }}</text>
			</view>
			<view class="btn" @click="addBtn">
				<text>添加</text>
			</view>
		</view>
		<!-- 已选材料： -->
		<view class="selected-materials common" v-if="progressList.length">
			<view class="title">
				<text>已选材料：</text>
				<text class="cancel" :class="canRemoveList.length? 'canRemove' : ''" @click="remove">删除</text>
			</view>
			<view class="selected-list-box">
				<block v-for="(item, index) in progressList" :key="index">
					<view class="selected-item">
						<image :src="decrease" mode="aspectFill" class="decrease" v-if="item.selectedNum != item.num"></image>
						<view class="selected-item-box" @click="selectedCancel(item)">
							<image :src="item.goods_image" mode="aspectFill" class="cards-item"></image>
							<view class="cards-title">
								{{ item.goods_name }}
							</view>
							<view class="selected-num" :class="item.selectedNum? '' : 'unselected-num'">
								<text>{{ item.selectedNum?  `已选${item.selectedNum}件` : `${item.num}件`}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 去合成 -->
		<template v-if="progressList.length">
			<view class="to-advance" @click="confirmConflate">
				<text>去合成</text>
			</view>
		</template>
		
		<comfirmMsg ref="comfirmMsg" :msg="msg"></comfirmMsg>
	</view>
</template>

<script>
	import baseUrl from '@/utils/siteInfo';
	
	import {
		removeGoods,
		doConflate,
	} from '@/api/conflate.js';
	
	export default {
		data(){
			return {
				decrease: baseUrl.imgroot + '/static/images/debris/decrease.png',
				removeGoods: [],
				canRemoveList: [],
				msg: '',
			}
		},
		props: {
			completeNum: {
				type: [String, Number],
				default: 0
			},
			conflateVal: {
				type: [String, Number],
				default: 0
			},
			completeVal: {
				type: [String, Number],
				default: 0
			},
			progressList: [Array],
			cardsId: [String, Number],
			progressId: [String, Number],
		},
		watch: {
			progressList: {
				handler(newList, oldList) {
					this.canRemoveList = this.progressList.reduce((pre, item) => {
				    	if(item.isSelected){
				    		pre.push(item)
				    	}
				    	return pre
				    }, []);
				},
				immediate: true
			}
		},
		methods: {
			// 添加材料
			addBtn(){
				this.$emit('toggle');
			},
			// 选择待删除的数量
			selectedCancel(el){
				if(el.isSelected){
					this.$emit('clearStatus', el.goods_id, 'progress')
				}else{
					this.$emit('changeModelNum', el.num, el.goods_id, 'progress')
				}
			},
			// 移除碎片
			remove(){
				this.removeGoods = this.progressList.reduce((pre, item) => {
					if(item.isSelected){
						pre.push({
							goods_id: item.goods_id,
							num: item.selectedNum
						})
					}
					return pre
				}, []);
				if(!this.removeGoods.length){
					uni.showToast({
						title: '暂无可移除的碎片',
						icon:'none',
						mask: true
					})
					return
				}
				this.removeConflate();
			},
			async removeConflate(){
				try{
					let data = {
						goods: this.removeGoods,
						progress_id: this.progressId
					}
					let res = await removeGoods(data);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						mask: true
					})
					if(res.code == 0){
						this.$emit('getConflateProgressDetail')
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			// 去合成
			confirmConflate(){
				if(Number(this.completeVal) < Number(this.conflateVal)){
					uni.showToast({
						title: "您的目前的合成进度未满",
						icon: 'none',
						mask: true
					})
					return
				}
				this.doConflate()
			},
			async doConflate(){
				try{
					let res = await doConflate({
						progress_id: this.progressId
					});
					this.msg = res.msg;
					this.$refs.comfirmMsg.openBtn();
					if(res.code == 0){
						this.$emit('getConflateDetail', 'noneLoading')
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style scoped lang="scss">
@import './composite-progress.scss';
</style>